@extends('home.base.goods')
@section('content')
<script type="text/javascript" src="{{ url('publics/jquery-1.8.3.min.js') }}"></script>
<style type="text/css">
	#hea{
		/*border:1px solid red;*/
	}
	td{
		width:100px;
		height:60px;
		font-size:14px;
		color:black;
		background:
	}
</style>
<div class="container" id="hea">
	<table style="width:100%">
		<tr>
			<td>小米MIX</td>
			<td>小米note2</td>
			<td>小米手机5s</td>
			<td>小米手机5s Plus</td>
			<td>小红米pro</td>
			<td>红米Note4</td>
			<td>红米手机4</td>
			<td>红米手机3s</td>
			<td>小米手机5</td>
			<td>小米 Max</td>
			<td>红米3x</td>
		</tr>
	</table>
	<div style="margin:50px"></div>
	<div style="width:49%;float:left;pdding:30px">
		<img src='{{ url("picppp/")}}/{{ $list[0]->pic }}' width="550px" height="600px">
	</div>
	<div style="width:50%;float:right">
		<table style="width:100%;background:#F6F8FC">
			<tr>
				<td colspan="2" style="font-size:30px;height:30px" id="pric">
					购买{{ $list[0]->goodsname }}				
					<span style="font-size:30px;color:#FF6700" class="spann">{{ $list[0]->price1}}元</span>
				</td>				
			</tr>
			<tr>
				<td style="font-size:15px;color:#FF003A">【{{ $list[0]->about }}】</td>
			</tr>
			<tr>
				<td colspan="2" style="font-size:20px;height:20px">1.选择版本</td>
			</tr>
			<tr>
				<td style="margin:5px;border:1px solid #F36701;width:300px;height:30px;" align="center" class="tdd" id="tdd{{ $list[0]->price1}}" onclick="vars({{ $list[0]->price1}},$(this).html())">{{ $list[0]->version1 }}</td>
			</tr>
			<tr><td style="height:3px"></td></tr>
			<tr>
				<td style="margin:5px;border:1px solid #F36701;width:300px;height:30px;" align="center" class="tdd" id='tdd{{ $list[0]->price2}}' onclick="vars({{ $list[0]->price2}},$(this).html())">{{ $list[0]->version2 }}</td>
			</tr>
			<tr><td style="height:3px"></td></tr>
			<tr>
				<td style="margin:5px;border:1px solid #F36701;width:300px;height:30px;" align="center" class="tdd" id='tdd{{ $list[0]->price3}}'onclick="vars({{ $list[0]->price3}},$(this).html())">{{ $list[0]->version3 }}</td>
			</tr>
			<tr><td style="height:3px"></td></tr>
			<tr>
				<td style="margin:5px;border:1px solid #F36701;width:300px;height:30px;" align="center" class="tdd" id='tdd{{ $list[0]->price4}}' onclick="vars({{ $list[0]->price4}},$(this).html())">{{ $list[0]->version4 }}</td>
			</tr>
			<tr><td style="height:3px"></td></tr>
			<tr>
				<td style="margin:5px;border:1px solid #F36701;width:300px;height:30px;" align="center" class="tdd" id='tdd{{ $list[0]->price5}}' onclick="vars({{ $list[0]->price5}},$(this).html())">{{ $list[0]->version5 }}</td>
			</tr>
			<script type="text/javascript">
				var tdd= $('.tdd');
				// console.log(tdd);
				for(var i = 0; i < tdd.length; i++){
					if($(tdd[i]).html()==''){
						$(tdd[i]).remove();
					}
				}
				function vars(price){
					$('.tdd').css('background-color','#F6F8FC');
					$('#tdd'+price).css('background-color','#F36701');
					$('#pric').children('.spann').remove();
					$('#pric').append('<span style="font-size:30px;color:#FF6700" class="spann">'+price+'元</span>');
				}
			</script>
			<tr>
				<td colspan="2" style="font-size:20px">2.选择颜色</td>
			</tr>		
			<tr>
				<td style="margin:5px;border:1px solid #F36701;width:300px;height:30px" align="center" class="tddd" id='tddd1' onclick="color(1)">{{ $list[0]->color1 }}</td>
			</tr>
			<tr><td style="height:3px"></td></tr>
			<tr>
				<td style="margin:5px;border:1px solid #F36701;width:300px;height:30px" align="center" class="tddd" id='tddd2' onclick="color(2)">{{ $list[0]->color2 }}</td>
			</tr>
			<tr><td style="height:3px"></td></tr>
			<tr>
				<td style="margin:5px;border:1px solid #F36701;width:300px;height:30px" align="center" class="tddd" id='tddd3' onclick="color(3)">{{ $list[0]->color3 }}</td>
			</tr>
			<tr><td style="height:3px"></td></tr>
			<tr>
				<td style="margin:5px;border:1px solid #F36701;width:300px;height:30px" align="center" class="tddd" id='tddd4' onclick="color(4)">{{ $list[0]->color4 }}</td>
			</tr>
			<tr><td style="height:3px"></td></tr>
			<tr>
				<td style="margin:5px;border:1px solid #F36701;width:300px;height:30px" align="center" class="tddd" id='tddd5' onclick="color(5)">{{ $list[0]->color5 }}</td>
			</tr>
			<tr><td style="height:3px"></td></tr>
			<script type="text/javascript">
				var tddd= $('.tddd');
				for(var i = 0; i < tddd.length; i++){
					if($(tddd[i]).html()==''){
						$(tddd[i]).remove();
					}
				}
				function color(idd){
					$('.tddd').css('background-color','#F6F8FC');
					$('#tddd'+idd).css('background-color','#F36701');
					$('.tddd').removeAttr('title');
					$('#tddd'+idd).attr('title',idd);
				}
			</script>
			<tr>
				<td colspan="2"  id="aja">
					<div style="margin:10px"></div>
						<div style="background:#FF6700;color:#FFFFFF;height:35px;width:120px;font-size:25px;padding:5px;padding-left:30px" onclick="doClose()">
						下一步
						</div>
				</td>
			</tr>
		</table>
		<form name="myform">
			<input type="hidden" name="_token" value="{{ csrf_token() }}">
			<input type="hidden" name="goodspic" value="{{ $list[0]->picture }}">
			<input type="hidden" name="goodsname" value="{{ $list[0]->goodsname }}">
			<input type="hidden" name="goodsid" value="{{ $list[0]->goodsdetid }}">
			<input type="hidden" name="userid" value="{{ $userid }}">
		</form>
		<script type="text/javascript">
			function doClose()
			{
				// var goodsn = $('#pric').html();
				// 去除字串中的(取<span style="font-size:30px;color:#FF6700" class="spann">前面的字符串;
				// var str = goodsn.indexOf('<span style="font-size:30px;color:#FF6700" class="spann">');
				// var str1 = goodsn.substring(0,str);
				// //去除字串前面 "购买";
				// var goodsname = str1.replace(/\s*购买\s*/,'');
				// console.log(goodsname);
				var userid = $('input[name="userid"]').val();
				var goodsid = $('input[name="goodsid"]').val();
				var goodspic = $('input[name="goodspic"]').val();
				var goodsname = $('input[name="goodsname"]').val();
				// console.log(goodsname);
				var price = parseFloat($('#pric').children('.spann').text());
				var _token = $('input[name="_token"]').val();
				var tddd = $('.tddd');
				for (var i=0; i<tddd.length;i++) {
					if (!$(tddd[i]).attr('title')=='') {
						id = $(tddd[i]).attr('title');
						var color = $('#tddd'+id).html();
							$.ajax({
							url:'/home/carajax',
							type:'post',
							async:false,				//是否异步
							data:{userid:userid,goodsid:goodsid,goodspic:goodspic,goodsname:goodsname,price:price,color:color,_token:_token},				//发送的数据
							dataType:'json',			//响应的数据类型
							error:function()			//失败时回调函数
							{
								alert('ajax请求失败');
							},
							success:function(data)		//成功时回调函数
							{
								// console.log(data);
								if(data>0){
									$('#aja').children('div').remove();
									$('#aja').append('<div style="margin:10px"></div><div style="background:#FF6700;color:#FFFFFF;height:35px;width:120px;font-size:25px;padding:5px;padding-left:30px"><a href="/home/car">去结算</a></div>');
								}
							}
						});
					}
				}
						
			}
	</script>
	</div>
</div>

<div style="margin-left:200px;margin-top:50px;width:800px;">
		<button class="btn" id="bid">查看商品评价</button>
	<div id="did" style="display:none">
		<h1 style="color:black">商品评价</h1>
		<table border="3px" style="border:3px solid #FF6700">
			<thead>
				<th style="height:80px;width:400px;color:#FF6700">用户</th>
				<th style="height:80px;width:400px;color:#FF6700">评论内容</th>
				<th style="height:80px;width:400px;color:#FF6700">评论时间</th>
				<th style="height:80px;width:400px;color:#FF6700">商家回复</th>
			</thead>
			@foreach($datas as $v)
			<tbody >
				<td  align="center">{{ $v->userid }}</td>
				<td  align="center">{{ $v->content }}</td>
				<td  align="center">{{ date('Y-m-d H:i:s',$v->time) }}</td>
				@foreach($reply as $k)
					@if($k->pid == $v->id)
					<td  align="center">{{ $k->content}}</td>
					@endif
				@endforeach
			</tbody>
			@endforeach

		</table>
		<script type="text/javascript">
			$("#bid").click(function(){
				$('#did').slideToggle();
			});
		</script>
	</div>
</div>

@stop
